<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>蓝源Eloan-P2P平台->用户注册</title>
    <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="/css/core.css" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
    <style type="text/css">
        .el-register-form {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }

        .el-register-form .form-control {
            width: 220px;
            display: inline;
        }

        input[name='verifycode'] + label {
            position: absolute;
            top: 7px;
            left: 220px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            function checkPhoneNumber(phoneNumber) {
                return /^1[3456789]\d{9}$/.test(phoneNumber)
            };
            jQuery.validator.addMethod("checkPhoneNumber", function (value, element) {
                return checkPhoneNumber(value)
            }, "手机号码格式不正确")
            //发送验证码
            $("#sendVerifyCode").click(function () {
                var phoneNumber = $("[name=username]").val()
                if (!checkPhoneNumber(phoneNumber)) {
                    $.messager.popup("手机号码不正确");
                    return;
                }
                var thisObj = $(this)
                thisObj.prop("disable", true);
                $.ajax({
                    url: '/sendVerifyCode',
                    data: {phoneNumber: phoneNumber},
                    dataType: 'json',
                    success: function (data) {
                        $.messager.popup(data.message)
                        if (data.success) {
                            var count = 5;
                            var timer = window.setInterval(function () {
                                if (count > 0) {
                                    count--;
                                    thisObj.text(count + "秒后重新发送")
                                } else {
                                    thisObj.prop("disable", false);
                                    window.clearInterval(timer);
                                    thisObj.text("发送验证码")
                                }
                            }, 1000);
                        } else {
                            thisObj.prop("disable", false);
                            thisObj.text("发送验证码")
                        }
                    }
                })
            })
            //
            $("#registerForm").validate({
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        dataType: 'json',
                        success: function (data) {
                            if (data.success) {
                                $.messager.confirm("温馨提示", "注册成功,点击跳转到登录页面", function () {
                                    window.location.href = "/login.html"
                                })
                            } else {
                                $.messager.popup(data.message)
                            }
                        }
                    })
                },
                rules: {
                    username: {
                        required: true,
                        checkPhoneNumber: true,
                        remote: "/checkUsername"
                    },
                    verifycode: {
                        required: true,
                    },
                    password: {
                        required: true,
                        rangelength: [4,16]
                    },
                    confirmPwd: {
                        equalTo: "#password"
                    }
                },
                messages: {
                    username: {
                        required: "手机号码必填",
                        checkPhoneNumber: "手机号码格式不正确",
                        remote: "手机号码已被占用"
                    },
                    verifycode: {
                        required: "验证码必填",
                    },
                    password: {
                        required: "密码必填",
                        rangelength: "密码的长度应该在{0}~{1}位之间"
                    },
                    confirmPwd: {
                        equalTo: "两次密码不一致"
                    }
                },
                errorClass: "text-danger",
                highlight: function (element, errorClass) {
                    $(element).closest(".form-group").addClass("has-error");
                },
                unhighlight: function (element, errorClass) {
                    $(element).closest(".form-group").removeClass("has-error").addClass("has-success");
                }
            })
        })
    </script>
</head>
<body>
<!-- 网页头信息 -->
<div class="el-header">
    <div class="container" style="position: relative;">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/">首页</a></li>
            <li><a href="/login.html">登录</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
</div>

<!-- 网页导航 -->
<div class="navbar navbar-default el-navbar">
    <div class="container">
        <div class="navbar-header">
            <a href=""><img alt="Brand" src="/images/logo.png"></a>
            <span class="el-page-title">用户注册</span>
        </div>
    </div>
</div>

<!-- 网页内容 -->
<div class="container">
    <form id="registerForm" class="form-horizontal el-register-form" action="/userRegister" method="post">
        <p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p>
        <div class="form-group">
            <label class="control-label col-sm-2">手机号码</label>
            <div class="col-sm-10">
                <input type="text" placeholder="手机号码" autocomplete="off" name="username" class="form-control"
                       id="phoneNumber"/>
                <p class="help-block">请使用输入正确的手机号码</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">手机验证码</label>
            <div class="col-sm-10">
                <input type="text" placeholder="手机验证码" style="width: 100px" autocomplete="off" name="verifycode"
                       class="form-control" id="verifycode"/>
                <button type="button" class="btn btn-success" id="sendVerifyCode">
                    发送验证码
                </button>
                <p class="help-block">用户名为4~16位字母，数字，符号或中文</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">密&emsp;码</label>
            <div class="col-sm-10">
                <input type="password" placeholder="密码" autocomplete="off" name="password" id="password"
                       class="form-control"/>
                <p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">确认密码</label>
            <div class="col-sm-10">
                <input type="password" placeholder="确认密码" autocomplete="off" name="confirmPwd" class="form-control"/>
                <p class="help-block">请再次填写密码</p>
            </div>
        </div>
        <div class="form-gorup">
            <div class="col-sm-offset-2">
                <button type="submit" class="btn btn-success">
                    同意协议并注册
                </button>
                &emsp;&emsp;
                <a href="/login.html" class="text-primary">已有账号，马上登录</a>

                <p style="padding-left: 50px;margin-top: 15px;">
                    <a href="#">《使用协议说明书》</a>
                </p>
            </div>
        </div>
    </form>
</div>
<!-- 网页版权 -->
<div class="container-foot-2">
    <div class="context">
        <div class="left">
            <p>专注于高级Java开发工程师的培养</p>
            <p>版权所有：&emsp;2017广州狼码教育科技有限公司</p>
            <p>地&emsp;&emsp;址：&emsp;广州市天河区棠下涌东路大地商务港D座603室</p>
            <p>电&emsp;&emsp;话： 020-2900xxxx&emsp;&emsp;
                邮箱：&emsp;service@wolfcode.cn</p>
            <p>
                <a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
                    ：粤ICP备字17147191号-1</a>
            </p>
            <p>
                <a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do"
                   style="color: #ffffff">穗公网安备：44010650010086</a>
            </p>
        </div>
        <div class="right">
            <a target="_blank" href="http://weibo.com/wolfcode"><img
                    src="/images/sina.png"></a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
</body>
</html>